<template>
<div class='editable-cell'>
  <div v-if="editable" class='editable-cell-input-wrapper'>
    <el-select size="mini" v-model="editValue" @change="handleChange" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <i class="el-icon-close editable-cell-icon-cancel" @click="cancel"></i>
    <i class="el-icon-check editable-cell-icon-check" @click="check"></i>
  </div>
  <div v-else class='editable-cell-text-wrapper'>
    {{text || ' '}}
    <i class="el-icon-edit editable-cell-icon" @click="edit"></i>
  </div>
</div>
</template>
<script>
export default {
  props: {
    options: Array,
    id: [String, Number],
  },
  data () {
    return {
      editValue: this.id,
      value: this.id,
      editable: false,
    }
  },
  computed: {
    text() {
      let options = this.options || []
      const target = options.find(item => item.value === this.value)
      if (target) {
        return target.label
      }
      return ' '
    },
  },
  methods: {
    handleChange (value) {
      this.editValue = value
    },
    cancel () {
      this.editable = false
      this.editValue = this.value
    },
    check () {
      this.editable = false
      this.editable = false
      this.value = this.editValue
      this.$emit('change', this.value)
    },
    edit () {
      this.editable = true
    },
  },
}
</script>
<style scoped>
  @import '../editable-cell.css';
</style>